<template>
    <div class="common-layout">
        <el-container>
            <el-header style="margin:0px; padding:0px;">
                <div class="divHeader" style="background-color: #2597b9;">
                    <span id="systemName" style="color: white; font-weight: 600;">
                        {{ $t('index.systemName') }}
                    </span>
                    <span style="float:right; margin-right:20px">
                        <baseUser style="display:inline; margin-right:20px;" />
                    </span>
                </div>
            </el-header>
            <el-main style="margin:0px; padding:0px;">
                <el-container>
                    <el-aside class="indexAside" width="220px">
                        <div class="indexAsideLeft">
                            <div style="overflow: auto; height: 100% ; margin: 0px; ">
                                <BaseSide></BaseSide>
                            </div>
                        </div>
                    </el-aside>
                    <el-main class="indexMain">
                        <el-tabs v-model="editableTabsValue" type="border-card" closable="true" class="demo-tabs"
                            @tab-remove="removeTab">
                            <el-tab-pane v-for="item in editableTabs" :key="item.ID" :label="item.NAME" :name="item.ID">
                                <component v-if="item.compContent != null" :is="item.compContent" />
                                <component v-else-if="item.ROUTE != null" :is="item.ROUTE" />
                            </el-tab-pane>
                        </el-tabs>

                    </el-main>
                </el-container>
            </el-main>
        </el-container>


    </div>
</template>

<script lang="ts" setup>

import { ref, reactive, getCurrentInstance, onMounted, onBeforeUnmount , defineAsyncComponent } from 'vue'
import baseUser from '~/components/layouts/BaseUser.vue'


// 编辑的Tab页（ID）
let editableTabsValue = ref('HOME')

// 打开的Tab页
let editableTabs = reactive([
    {
        ID: 'HOME',
        NAME: '首页',
        ROUTE_TYPE: 'TAB',
        ROUTE: 'defaultHome',
        compContent: defineAsyncComponent(() => {
            return import('~/components/index/defaultHome.vue');
        })
    }
])

// ********************************************************************
// 处理全局事件
// ********************************************************************
const cxt = getCurrentInstance()
const bus = cxt.appContext.config.globalProperties.$bus
onMounted(() => {
    bus.on('system_menu_click', (clickItem) => {
        openTabItem(clickItem)
    })
})

onBeforeUnmount(() => {
    bus.off('system_menu_click')
})


// 处理关闭Tab标签
const removeTab = (targetName: string) => {

    if (editableTabs.length == 1) {
        return;
    }

    var ipostion = -1;
    for (var i = 0; i < editableTabs.length; i++) {
        if (editableTabs[i].ID == targetName) {
            ipostion = i;
        }
    }

    editableTabs.splice(ipostion, 1);

    if (editableTabs.length > ipostion) {
        editableTabsValue.value = editableTabs[ipostion].ID
    } else {
        // 定位到最后一个
        editableTabsValue.value = editableTabs[editableTabs.length - 1].ID
    }


}

// 打开标签页
function openTabItem(tabItem: {
    ID: string,
    NAME: string,
    ROUTE_TYPE: string,
    ROUTE: string,
    compContent:any
}) {

    // 判断是否已经存在
    for (var i = 0; i < editableTabs.length; i++) {
        console.log(editableTabs[i].ID + "--" + tabItem.ID);

        if (editableTabs[i].ID == tabItem.ID) {
            // 存在，则直接打开
            editableTabsValue.value = editableTabs[i].ID;
            return;
        }
    }

    editableTabs.push(tabItem)
    editableTabsValue.value = tabItem.ID

    // 异步加载一个组件
    tabItem.compContent = defineAsyncComponent(() => {
        return import('../../' + tabItem.ROUTE);
    })

    

}

</script>


<style>
.demo-tabs {
    background-color: #fff;
    border-radius: 4px;
    height: calc(100vh - 84px);
    margin-left: -15px;
    box-shadow: 0px 4px 2px -1px #999;
}

.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
    background-color: #000;
}

.divHeader {
    background-color: #fff;
    text-align: left;
    line-height: 50px;
    padding-left: 20px;
    border-bottom: 1px solid #eee;
    box-shadow: 0px 4px 2px -1px #999;
}

.indexAside {
    padding: 4px;

}

.indexAsideLeft {
    background-color: #fff;
    height: calc(100vh - 82px);
    overflow: hidden;
    box-shadow: 0px 4px 2px -1px #999;
    border-radius: 4px;
    /* background: linear-gradient(to bottom, green 0%, blue 60%); */
}

.indexMain {
    padding: 4px
}

#systemName {
    font-weight: 600
}

#commonOptArea {
    float: right
}

.common-layout {
    height: 100vh;
    width: 100vw;
    background-color: #eee;
}
</style>